import React from 'react';
import ReactDom from 'react-dom';
import videojs from 'video.js';

const vjsComponent = videojs.getComponent('Component');

class EpisodeList extends React.Component {
  render() {
    // console.log(this, 'this')
    return (
      <div>
        <h1>{this.props.body}</h1>
      </div>
    )
  }
}


class VjsEpisodeList extends vjsComponent {
  constructor(player, options) {
    super(player, options);
    this.mount = this.mount.bind(this);

    this.state = {
      txt: 'stop'
    }

    player.ready(() => {
      this.mount();
    });

    this.on('dispose', () => {
      ReactDom.unmountComponentAtNode(this.el());
    })

    this.on('playing', () => {
      this.setState({
        txt: 'playing'
      })
    })
  }

  mount() {
    ReactDom.render(<EpisodeList vjsComponent={this} body={this.state.txt}/>, this.el())
  }
}

VjsEpisodeList = vjsComponent.registerComponent('VjsEpisodeList', VjsEpisodeList);

export default VjsEpisodeList;
